<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" >
<head th:include="admin/common/resource ::commonHead('首页')" ></head>
<body>
<div class="container-fluid">
    <div class="toolbar btn-group-sm" role="toolbar" >
        <h6 style="margin-top: 10px;margin-bottom: 20px" > 后台管理系统 / 首页管理 / 推荐 </h6>
        <div style="margin-bottom: 10px;" >
            <button shiro:hasPermission="recommend:add" onclick="save()"  type="button" class="btn btn-sm btn-success"> 推荐 </button>
        </div>
    </div>
    <table class="table">
        <thead>
        <tr>
            <th scope="col">
                <input id="checkAll" type="checkbox" name="all" th:value="0" >
            </th>
            <th scope="col"> ID </th>
            <th scope="col"> 标题 </th>
            <th scope="col"> 缩略图 </th>
            <th scope="col"> 所属分类 </th>
            <th scope="col"> 发布人 </th>
            <th scope="col"> 付费标准 </th>
            <th scope="col"> 价格 </th>
            <th scope="col"> 创建时间 </th>
            <th scope="col"> 状态 </th>
            <th scope="col"> 操作 </th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="product:${pager.list}" >
            <th>
               <input class="checkbox" type="checkbox" name="ids[]" th:value="${product.id}" th:checked="${product.recommended == 1}"  >
            </th>
            <th scope="row" th:text="${product.id}" ></th>
            <td th:text="${product.title}" ></td>
            <td>
                <img th:src="${imageService+product.picture}" style="height: 40px" alt="">
            </td>
            <td th:text="${product.categoryName}" >  </td>
            <td th:text="${product.authorName}"></td>
            <td th:text="${product.cost}==1?'收费':'免费'" ></td>
            <td th:text="${product.price}" ></td>
            <td th:text="${#dates.format(product.createTime,'yyyy-MM-dd HH:mm')}" ></td>
            <td th:text="${product.recommended == 1?'已推荐':'未推荐'}" ></td>
            <td>
                <a shiro:hasPermission="recommend:cancel" class="btn-outline-danger" th:href="@{'javascript:cancel('+${product.recommendId}+')'}">取消</a>
            </td>
        </tr>
        </tbody>
    </table>
    <!-- 分页 -->
    <div th:replace="admin/common/pager ::page_pager(${pager.currentPage},0,${pager.totalPage}, @{/admin/recommend/product?type=${productType}})"></div>
</div>
</body>
<div th:include="admin/common/resource ::footerJs"></div>
<script th:src="@{/layui/layui.all.js}"></script>
<script>
    
    function save() {
        var checkbox = $(".checkbox");
        var ids = []
        $.each(checkbox,function (k) {
            var state = checkbox.eq(k).prop('checked');
            if(state){
                ids.push(checkbox.eq(k).val())
            }
        })
        console.log(ids,'ids');
        $.ajax({
            type:"post",
            contentType:"application/json",
            url:"/admin/recommend/save",
            data:JSON.stringify({
                    type:[[${productType}]],
                    ids:ids
                }
            ),
            success:function (result) {
                console.log(result)
                if(result.code == 0){
                    layer.msg("设置成功",function () {
                        window.location.reload()
                    },2000)
                }else{
                    layer.msg("设置失败",function () {
                        window.location.reload()
                    },2000)
                }
            }
        })
    }

    $("#checkAll").on('change',function () {
        var state = $("#checkAll").is(":checked")
        if(state){
            $(".checkbox").prop("checked", true);
        }else{
            $(".checkbox").prop("checked", false);
        }
    })

    function cancel(id){
        layer.confirm('确定要取消吗?', function(index){
            layer.close(index);
            //向服务端发送删除指令
            $.ajax({
                type:'delete',
                url: "/admin/recommend/cancel",
                data: {
                    id: id
                },
                success: function (data) {
                    console.log(data);
                    if(data.status == 0){
                        layer.msg("取消成功",function () {
                            window.location.reload();
                        },2000)
                    }else{
                        layer.msg("取消失败")
                    }
                }
            })
        });
    }
</script>
</html>